.goods-detail {
	height: 100%;
	padding-bottom: 100rpx;
	&.active {
		padding-bottom: 170rpx;
	}
}

// 商品媒体信息
.goods-media {
	width: 100%;
	position: relative;
	overflow: hidden;

	&:after {
		padding-top: 100%;
		display: block;
		content: '';
	}

	.goods-img,
	.goods-video {
		position: absolute;
		width: 100%;
		height: 100%;
		left: 0;
		top: 0;
		transition-property: transform;
		transition-timing-function: cubic-bezier(0, 0, 0.25, 1);
		transition-duration: 350ms;
		transform: translate3d(0, 0, 0);
	}

	.goods-img {
		transform: translateX(100%);
	}

	.goods-video {
		transform: translateX(-100%);
	}

	.goods-img.show,
	.goods-video.show {
		transform: translateX(0);
	}

	.goods-img .swiper {
		width: 100%;
		height: 100%;

		.item {
			width: 100%;
			height: 100%;
		}

		image {
			width: 100%;
			height: 100%;
		}
	}

	.goods-img .img-indicator-dots {
		position: absolute;
		z-index: 5;
		bottom: 40rpx;
		right: 40rpx;
		background: rgba(100, 100, 100, 0.4);
		color: #fff;
		font-size: $font-size-tag;
		line-height: 40rpx;
		border-radius: 20rpx;
		padding: 0 20rpx;
	}

	.goods-video video {
		width: 100%;
		height: 100%;
	}

	.goods-video .uni-video-cover {
		background: none;
	}

	.media-mode {
		position: absolute;
		width: 100%;
		z-index: 5;
		bottom: 40rpx;
		//#ifdef MP
		bottom: 80rpx;
		//#endif
		text-align: center;
		line-height: 50rpx;

		text {
			background: rgba(100, 100, 100, 0.4);
			color: #fff;
			font-size: $font-size-tag;
			line-height: 50rpx;
			border-radius: 20rpx;
			padding: 0 30rpx;
			display: inline-block;

			&:last-child {
				margin-left: 40rpx;
			}
		}
	}
}

.goods-msg{
	background-repeat: no-repeat;
	background-size: 100% 100%;
	height: 114rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: $margin-updown $padding;
	box-sizing: border-box;
	.left-box{
		display: flex;
		align-items: flex-start;
		flex-direction: column;
		justify-content: center;
		.left-top{
			color: white;
			.util-icon{
				font-size: 30rpx;
			}
			.price{
				font-size: 34rpx;
			}
			.num{
				display: inline-block;
				border-radius: 30rpx;
				height: 40rpx;
				margin-left: 15rpx;
				color:#FF1919;
				padding: 0 15rpx;
				line-height: 40rpx;
				background-color: white;
				font-size: $font-size-tag;
			}
		}
		.left-bom{
			text:first-child{
				color: white;
				font-size: $font-size-tag;
				text-decoration:line-through;
			}
			text:last-child{
				color: white;
				font-size: $font-size-tag;
				margin-left: 15rpx;
			}
		}
	}
	.right-box{
		display: flex;
		flex-direction: column;
		align-items: flex-end;
		.right-top{
			color:white;
			font-size: $font-size-sub;
		}
		.right-bom{
			
		}
	}
}
.title-box{
	padding: 0 30rpx;
	box-sizing: border-box;
	background: #ffffff;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	padding-right: 0;
	padding-bottom: 0;
	margin-bottom: 0;
	.title-text{
		font-size: $font-size-toolbar;
		width:550rpx;
		font-weight: bold;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}
	.like-box{
		background: rgba(#FF6706,.1);
		width: 152rpx;
		height: 60rpx;
		border-top-left-radius: 30rpx;
		border-bottom-left-radius: 30rpx;
		padding: 0 34rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
}
.title-subtext{
	font-size: $font-size-sub;
	background-color: white;
	padding: $padding;
	padding-bottom: 10rpx;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	margin-bottom: $margin-updown;
}
.footer-box{
	background-color: white;
	.footer-img-box{
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
		image{
			width: 380rpx;
		}
		.abs-box{
			width: 100%;
			position: absolute;
			left: 0;
			text-align: center;
			color: white;
			font-weight: bold;
			font-size: $font-size-toolbar;
			letter-spacing: 4rpx;
			top: 0;
		}
	}
	.footer-item{
		display: flex;
		align-items: flex-start;
		padding: $padding;
		
		.img-box{
			width: 12%;
			padding-top: 14rpx;
			display: flex;
			align-items: center;
			image{
				margin: 0 auto;
				width: 32rpx;
				height: 38rpx;
			}
		}
		.footer-ddetail-box{
			.footer-item-title{
				font-size: $font-size-toolbar;
				font-weight: bold;
			}
			.title-detail{
				font-size: $font-size-sub;
				color: $color-tip;
			}
		}
	}
}
.group-wrap {
	margin-bottom: 20rpx;
	padding: 0 30rpx;
	box-sizing: border-box;
	background: #ffffff;

	.goods-module-wrap {
		position: relative;

		&.info {
			padding: 20rpx 0 20rpx;
		}
		.price-symbol {
			font-size: $font-size-toolbar;
			position: relative;
			top: 8rpx;
			font-weight: bold;
			margin-right: 4rpx;
		}

		.price {
			font-size: 48rpx;
			position: relative;
			align-self: flex-end;
			line-height: 1;
			font-weight: bold;
			vertical-align: middle;
		}
		.member-price-wrap {
			display: inline-block;
			font-weight: bold;
			margin-left: 20rpx;
			.unit {
				font-size: $font-size-tag;
				margin-right: 4rpx;
			}
			.money {
				font-size: $font-size-base;
			}
			.img-wrap {
				width: 83rpx;
				height: 34rpx;
				font-size: $font-size-goods-tag;
				border-radius: 6rpx;
				display: inline-block;
				vertical-align: text-top;
				margin-left: 10rpx;
				image {
					width: 100%;
					height: 100%;
				}
			}
		}
		.sku-name-wrap,
		.introduction {
			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-line-clamp: 2;
			-webkit-box-orient: vertical;
		}
		.sku-name-wrap {
			font-weight: bold;
			font-size: $font-size-toolbar;
			line-height: 1.6;
		}
		.introduction {
			margin: $margin-updown 0;
			font-size: $font-size-base;
		}

		.logistics-wrap {
			display: flex;
			margin-top: 20rpx;
			text {
				flex: 1;
				font-size: $font-size-tag;
				color: $color-tip;
				text-align: center;

				&:first-of-type {
					text-align: left;
				}

				&:last-of-type {
					text-align: right;
				}
			}
		}
	}

	.market-price-wrap {
		margin-left: 20rpx;
		color: $color-tip;
		text-decoration: line-through;
		display: inline-block;
		vertical-align: bottom;
		line-height: initial;
		.unit {
			margin-right: 4rpx;
			font-size: $font-size-tag;
		}
		.money {
			font-size: $font-size-base;
		}
	}
}

.follow-and-share {
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	margin-top: 8rpx;
	.iconfont {
		font-weight: bold;
		margin-right: 30rpx;
		font-size: $font-size-toolbar;
		vertical-align: middle;
		&:first-child {
			font-size: 30rpx;
		}
		&:last-child {
			margin-right: 0;
		}
	}
	.fenxiao {
		display: block;
		position: absolute;
		font-size: $font-size-tag;
		font-weight: bold;
		width: 140%;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		left: -80rpx;
		text-align: right;
	}
}

.goods-cell {
	display: flex;
	padding: 20rpx 0;
	align-items: center;
	background: #fff;
	line-height: 40rpx;
	justify-content: space-between;

	.tit {
		color: $color-tip;
		font-size: $font-size-base;
		margin-right: 20rpx;
		width: 70rpx;
	}

	.box {
		width: 90%;
		font-size: $font-size-base;
		line-height: inherit;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
}

.goods-evaluate {
	padding: 20rpx 0;
	background: #fff;

	.tit {
		display: flex;
		align-items: center;
		font-size: $font-size-tag;
		&.active {
			padding-bottom: 20rpx;
			border-bottom: 1rpx solid $color-line;
		}

		view {
			flex: 1;
			line-height: 40rpx;
			text-align: left;
		}
	}

	.evaluate-item {
		padding: 30rpx 0 0;
		.evaluator {
			display: flex;
			align-items: center;
			justify-content: space-between;
			.evaluator-info {
				display: flex;
				align-items: center;
			}
			.evaluator-face {
				width: 80rpx;
				height: 80rpx;
				border-radius: 50%;
				overflow: hidden;

				image {
					width: 100%;
					height: 100%;
					border-radius: 50%;
				}
			}

			.evaluator-name {
				margin-left: 20rpx;
				font-size: $font-size-base;
				max-width: 50%;
			}
			.time {
				font-size: $font-size-goods-tag;
			}
		}

		.cont {
			text-align: justify;
			display: -webkit-box;
			-webkit-line-clamp: 2;
			-webkit-box-orient: vertical;
			-webkit-box-pack: center;
			overflow: hidden;
			word-break: break-all;
			font-size: $font-size-tag;
		}

		.evaluate-img {
			display: inline-flex;
			margin-top: 20rpx;

			.img-box {
				width: 100rpx;
				height: 100rpx;
				overflow: hidden;
				margin: 0 20rpx 20rpx 0;
				border-radius: $border-radius;

				image {
					width: 100%;
					height: 100%;
				}
			}

		}
	}
	.evaluate-item-empty {
		float: right;
		color: $color-tip;
		text:first-child {
			margin-right: 30rpx;
		}
		.iconfont {
			margin-top: 2rpx;
		}
	}
}

.goods-action-button {
	flex: 1;
}

// 商家服务
.goods-merchants-service-popup-layer {
	height: 660rpx;
	scroll-view {
		position: absolute;
		left: 0;
		right: 0;
		height: 65%;
		.item {
			padding: 0 30rpx;
			height: 120rpx;
			line-height: 100rpx;
			border-bottom: 2rpx solid $color-line;
			&:last-child {
				border-bottom: none;
			}
			.iconfont {
				display: inline-block;
				margin-right: 20rpx;
				font-size: $font-size-toolbar;
				vertical-align: top;
			}
			.info-wrap {
				display: inline-block;
				vertical-align: middle;
				width: 90%;
				.title {
					display: block;
					font-size: $font-size-base;
				}
				.describe {
					font-size: $font-size-tag;
					color: $color-tip;
					display: block;
					padding: 10rpx 0;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
				}
			}
			&.empty-desc {
				height: 100rpx;
				.iconfont {
					vertical-align: middle;
				}
			}
		}
	}
}

// 商品属性
.goods-attribute-popup-layer {
	height: 660rpx;

	.goods-attribute-body {
		position: absolute;
		left: 0;
		right: 0;
		height: 60%;
		.item {
			padding: $padding 0;
			margin: 0 30rpx;
			border-bottom: 1px solid $color-line;
			.attr-name {
				color: $color-tip;
				display: inline-block;
				width: 150rpx;
				overflow: hidden;
				vertical-align: text-top;
			}
			.value-name {
				margin-left: 20rpx;
				vertical-align: text-top;
			}
			&:last-child {
				border-bottom: none;
			}
		}
	}
}

// 详情
.goods-detail-tab {
	width: 100%;
	padding-top: $padding;
	background: #ffffff;
	.detail-tab {
		// width: 100%;
		// display: flex;
		// justify-content: center;
		// align-items: center;
		margin-left: 30rpx;
		.tab-item {
			height: 70rpx;
			color: $color-title;
			line-height: 70rpx;
			box-sizing: border-box;
			font-size: $font-size-toolbar;
		}
		.tab-item.active {
			// position: relative;
		}
		.tab-item.active::after {
			// content: '';
			// display: inline-block;
			// width: 100%;
			// height: 4rpx;
			// position: absolute;
			// left: 0;
			// bottom: 0;
			// border-radius: 3rpx;
		}
		.tab-item:nth-child(1) {
			// margin-right: 25%;
		}
	}
	.detail-content {
		width: 100%;
	}
	.goods-details {
		padding: $padding;
		margin-bottom: 20rpx;
		overflow: hidden;
		background: #ffffff;
	}
	.goods-details.active {
		min-height: 150rpx;
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		color: $color-tip;
	}
}

// 海报
// .uni-popup__wrapper-box
.poster-layer {
	.generate-poster {
		padding: 40rpx 0;
		.iconfont {
			font-size: 80rpx;
			color: #07c160;
			line-height: initial;
		}
		> view {
			text-align: center;
			&:last-child {
				margin-top: 20rpx;
			}
		}
	}
	.image-wrap {
		width: 70%;
		margin: 30px auto 20px auto;
		box-shadow: 0 0 16px rgba(100, 100, 100, 0.3);
		image {
			width: 100%;
			height: 100%;
			height: 750rpx;
		}
	}
	.msg {
		padding: 40rpx;
	}
	.save {
		text-align: center;
		height: 80rpx;
		line-height: 80rpx;
	}
	.close {
		position: absolute;
		top: 0;
		right: 20rpx;
		width: 40rpx;
		height: 80rpx;
		font-size: 50rpx;
	}
}

.share-popup,
.uni-popup__wrapper-box {
	.share-title {
		line-height: 60rpx;
		font-size: $font-size-toolbar;
		padding: 15rpx 0;
		text-align: center;
	}

	.share-content {
		display: flex;
		display: -webkit-flex;
		-webkit-flex-wrap: wrap;
		-moz-flex-wrap: wrap;
		-ms-flex-wrap: wrap;
		-o-flex-wrap: wrap;
		flex-wrap: wrap;
		padding: 80rpx 15rpx;

		.share-box {
			flex: 1;
			text-align: center;

			.share-btn {
				margin: 0;
				padding: 0;
				border: none;
				line-height: 1;
				height: auto;
				text {
					margin-top: 20rpx;
					font-size: $font-size-tag;
					display: block;
					color: $color-title;
				}
			}

			.iconfont {
				font-size: 80rpx;
				line-height: initial;
			}
			.iconfuzhilianjie,
			.iconpengyouquan,
			.iconhaowuquan,
			.iconiconfenxianggeihaoyou {
				color: #07c160;
			}
		}
	}

	.share-footer {
		height: 90rpx;
		line-height: 90rpx;
		border-top: 2rpx solid $color-line;
		text-align: center;
	}
}

.newdetail {
	padding: 0 30rpx;
	background: #ffffff;
	.item {
		padding: 10rpx 0;
		display: flex;
		align-items: flex-start;
		
		&.coupon {
			.coupon-list {
				flex: 1;
				overflow: hidden;
				line-height: 1;
				height: 44rpx;
				line-height: 44rpx;
				max-width: 84%;
				box-sizing: border-box;
			}
			.coupon-item {
				padding: 0rpx 16rpx;
				margin-right: 20rpx;
				position: relative;
				border: 1px solid;
				background-size: cover;
				border-radius: 6rpx;
				display: inline-block;
				height: 36rpx;
				line-height: 36rpx;
				margin-top: 10rpx;
				box-sizing: border-box;
				// &:nth-child(2) {
				// 	margin-left: 0;
				// }
				&::after,
				&::before {
					content: '';
					width: 12rpx;
					height: 12rpx;
					position: absolute;
					top: 50%;
					border-radius: $border-radius;
					background: #fff;
					border: 1px solid;
				}
				&::after {
					left: -10rpx;
					transform: translateY(-50%) rotate(-45deg);
					border-top-color: transparent !important;
					border-left-color: transparent !important;
				}
				&::before {
					right: -10rpx;
					transform: translateY(-50%) rotate(-45deg);
					border-bottom-color: transparent !important;
					border-right-color: transparent !important;
				}
				&:first-child {
					margin-left: 0;
				}
				&:last-child {
					margin-right: 0;
				}
				view {
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					font-size: $font-size-activity-tag;
					text-align: center;
					line-height: 36rpx;
					height: 36rpx;
				}
			}
		}
		
		.label {
			width: 120rpx;
			font-weight: bold;
			color: $color-title;
			font-size: $font-size-base;
			margin-right: 20rpx;
		}
		.dian{
			padding: 0 10rpx;
		}
		&:last-child {
			border-bottom: none;
		}
		&.free {
			.free-tip {
				border: 1px solid;
				width: 56rpx;
				text-align: center;
				padding: 0 10rpx;
				border-radius: $border-radius;
				margin-right: 10rpx;
				font-size: $font-size-tag;
			}
			.value {
				display: inline-block;
				width: 70%;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
		}
		&.service {
			.list-wrap {
				margin-right: 20rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				flex: 1;
				.item-wrap {
					display: inline;
					font-size: $font-size-base;
					margin-right: 20rpx;
					&:last-child {
						margin-right: 0;
					}
					.icondui {
						font-size: $font-size-base;
						margin-right: 6rpx;
						line-height: 30rpx;
					}
					
				}
			}
		}

		&.selected-sku-spec {
			.box {
				flex: 1;
				margin-right: 60rpx;
				width: 80%;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				text {
					margin-right: 10rpx;
					&:last-child {
						margin-right: 0;
					}
				}
			}
		}
		.tihuo-address{
			overflow: hidden;
			text-overflow:ellipsis;
			white-space: nowrap;
		}
	
.address-detail{
	white-space: pre-wrap;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
}
		&.goods-attribute {
			.box {
				flex: 1;
				margin-right: 60rpx;
				width: 80%;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				text {
					margin-right: 20rpx;
					&:last-child {
						margin-right: 0;
					}
				}
			}
		}

		.img-wrap {
			width: 38rpx;
			height: 38rpx;
			position: absolute;
			right: 30rpx;
			image {
				width: 100%;
				height: 100%;
			}
		}
	}
}







.popup-layer {
	background: #fff;
	.head-wrap {
		font-size: $font-size-toolbar;
		line-height: 100rpx;
		height: 100rpx;
		display: block;
		text-align: center;
		.iconfont {
			position: absolute;
			float: right;
			right: 22px;
			font-size: $font-size-toolbar;
		}
	}
	.button-box {
		width: 100%;
		position: absolute;
		bottom: 0;
		z-index: 1;
		margin-bottom: 30rpx;
		button {
			height: 80rpx;
		}
	}
}

.more-img-wrap {
	width: 38rpx;
	height: 38rpx;
	position: absolute;
	right: 30rpx;
	image {
		width: 100%;
		height: 100%;
	}
}

.iconright {
	color: $color-tip;
	font-size: $font-size-base;
	position: absolute;
	right: 30rpx;
}
